<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dealerName" label="代理商名称">
                <el-input v-model="search.dealerName" placeholder="代理商名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dataType" label="代理商类型">
                <r-select v-model="search.dataType" type="4508" placeholder="代理商类型" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="employeeName" label="员工姓名">
                <el-input v-model="search.employeeName" placeholder="员工姓名" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="employeeNo" label="员工编号">
                <el-input v-model="search.employeeNo" placeholder="员工编号" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="userCode" label="用户帐号">
                <el-input v-model="search.userCode" placeholder="员工帐号" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="isOnjob" label="在职状态">
                <el-select v-model="search.isOnjob" :clearable="true" placeholder="请选择" >
                  <el-option v-for="item in isOnjob" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 用户列表 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">管理员信息</div>
          <div class="btnGroup">
            <el-button-group>
              <el-button type="primary" icon="el-icon-edit-outline" @click="editClick" >修改密码</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="restClick" >重置密码</el-button>
            </el-button-group>
          </div>
        </div>
        <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @selection-change="handleSelectionChange">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column type="selection" width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button :disabled="scope.row.IS_ONJOB === '10081002'" type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="edit(scope.row)"/>
              </el-tooltip>
              <el-tooltip class="item" content="明细" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detail(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="EMPLOYEE_NO" label="员工编号" min-width="120" />
          <el-table-column prop="EMPLOYEE_NAME" label="员工姓名" min-width="150" show-overflow-tooltip="true"/>
          <el-table-column prop="DEALER_CODE" label="代理商代码" min-width="150" show-overflow-tooltip="true"/>
          <el-table-column prop="DEALER_NAME" label="代理商名称" min-width="150" show-overflow-tooltip="true"/>
          <el-table-column :formatter="filterCode" prop="DATA_TYPE" label="业务范围" min-width="150" type="4508"/>
          <el-table-column prop="IS_ONJOB" label="在职状态" min-width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.IS_ONJOB === 10081001 ? 'success' : 'primary'">{{ scope.row.IS_ONJOB |
              isonjobFilter }}
              </el-tag>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog :title="text" :visible.sync="dialogFormVisible" width="65%" append-to-body >
      <el-form ref="form" :model="form" :rules="rules" :disabled="!bols" label-width="90px">
        <el-collapse v-model="mode">
          <el-collapse-item title="员工基本信息" name="1">
            <el-row :gutter="6">
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="员工编号" prop="EMPLOYEE_NO">
                  <el-input v-model="form.EMPLOYEE_NO" :disabled="bol" placeholder="员工编号" />
                  <el-input v-show="false" v-model="form.EMPLOYEE_ID" placeholder="员工id" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="员工姓名" prop="EMPLOYEE_NAME">
                  <el-input v-model="form.EMPLOYEE_NAME" :disabled="bol" placeholder="员工姓名" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="代理商" prop="DEALER_NAME">
                  <el-input v-model="form.DEALER_NAME" :disabled="bol" placeholder="代理商" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="经度" prop="LONGITUDE">
                  <el-input v-model="form.LONGITUDE" placeholder="经度" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="纬度" prop="LATITUDE">
                  <el-input v-model="form.LATITUDE" placeholder="纬度" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item prop="IS_ONJOB" label="在职状态">
                  <el-select v-model="form.IS_ONJOB" placeholder="请选择" @change="isOnjobChange">
                    <el-option v-for="item in isOnjob" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="离职日期" prop="DIMISSION_DATE">
                  <el-date-picker v-model="form.DIMISSION_DATE" :disabled="true" type="date" placeholder="离职日期"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="建档日期" prop="FOUND_DATE" type="date">
                  <el-date-picker v-model="form.FOUND_DATE" :disabled="bol" type="date" placeholder="建档日期"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button v-show="bols" type="primary" @click="save">保 存</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :title="'更改密码'" :visible.sync="dialogVisible" width="30%">
      <div class="elform">
        <el-form ref="editSearchForm" :inline="true" :model="editSearch" :rules="ruless" size="mini" label-width="120px" >
          <el-form-item label="密码" prop="newPassword">
            <el-input v-model="editSearch.newPassword" type="password" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="editSearch.checkPass" type="password" auto-complete="off"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="text"><i class="el-icon-search magnifier"/></el-button>
        <el-button type="primary" @click="editSave">更改</el-button>
        <el-button @click="back()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAdminUserList,
  getUserInfoById,
  editAdminUserInfo
} from '@/api/admin/org/gms/employeeInfo'
import { editPassword, restPassword } from '@/api/admin/auth/gms/user'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import formMixins from '@/mixins/formMixins'
import Gender from '@/components/Select/gender'
import IsOnjob from '@/components/Select/isOnjob'
// import {
//   formatDate
// } from 'element-ui/packages/date-picker/src/util'
import _ from 'lodash'
import { passWD } from '@/utils/validator'
export default {
  name: 'AdminEmployeeInfo',
  components: {
    BaseTable,
    rSelect,
    Gender,
    IsOnjob,
    filtercode
  },
  // 过滤器
  filters: {
    isonjobFilter(val) {
      return val === 10081001 ? '在职' : '离职'
    }
  },
  mixins: [formMixins],
  data() {
    // 校验新密码
    const validateNewPassword = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请输入新密码'))
      } else {
        passWD(rule, value, callback)
      }
    }
    // 校验第二次和第一次输入的密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.editSearch.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        passWD(rule, value, callback)
      }
    }
    return {
      active: 1,
      mode: ['1', '2'],
      way: '',
      text: '',
      bol: false,
      bols: true,
      dialogFormVisible: false,
      dialogVisible: false,
      multipleSelection: [],
      // 在职状态
      isOnjob: [{
        code: 10081001,
        name: '在职'
      },
      {
        code: 10081002,
        name: '离职'
      }
      ],
      rules: {
        IS_ONJOB: [{
          required: true,
          message: '请选择在职状态',
          trigger: 'blur'
        }]
      },
      ruless: {
        newPassword: [{
          validator: validateNewPassword,
          trigger: 'blur',
          required: true
        }],
        checkPass: [{
          validator: validateConfirmPassword,
          trigger: 'blur',
          required: true
        }]
      },
      editSearch: {
        empIds: '',
        newPassword: '',
        checkPass: ''
      },
      search: {
        limit: 10,
        pageNum: 1,
        employeeName: '',
        dealerName: '',
        isOnjob: '',
        employeeNo: ''
      },
      form: {
        EMPLOYEE_NO: '',
        EMPLOYEE_NAME: '',
        LONGITUDE: '',
        LATITUDE: '',
        DIMISSION_DATE: '',
        FOUND_DATE: '',
        IS_ONJOB: '',
        DEALER_NAME: ''
      },
      key: '',
      loading: false
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      getAdminUserList(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    EmployeeRolesCheck(data) {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = {}
      })
      const id = data.EMPLOYEE_ID
      getUserInfoById(id)
        .then(res => {
          this.form = _.cloneDeep(res)
        })
        .catch(err => {
        })
    },
    // 打开编辑框
    edit(data) {
      this.text = '管理员信息编辑'
      this.way = 'edit'
      this.bol = true
      this.bols = true
      this.dialogFormVisible = true
      this.EmployeeRolesCheck(data)
    },
    // 新增
    addDealer() {
      this.text = '管理员信息新增'
      this.way = 'addDealer'
      this.bol = false
      this.bols = true
      this.dialogFormVisible = true
      // const fouddate = formatDate(new Date(), 'yyyy-MM-dd')
    },
    // 明细
    detail(data) {
      this.text = '管理员信息明细'
      this.bol = true
      this.bols = false
      this.dialogFormVisible = true
      this.EmployeeRolesCheck(data)
    },
    // 编辑确认
    save() {
      this.$refs['form'].validate(valid => {
        debugger
        if (valid) {
          const params = {
            employeeNo: this.form.EMPLOYEE_NO,
            employeeName: this.form.EMPLOYEE_NAME,
            isOnjob: this.form.IS_ONJOB,
            dimissionDate: this.form.DIMISSION_DATE,
            foundDate: this.form.FOUND_DATE,
            dealerName: this.form.DEALER_NAME,
            longitudes: this.form.LONGITUDE,
            latitudes: this.form.LATITUDE
          }
          if (this.way === 'edit') {
            editAdminUserInfo(params, this.form.EMPLOYEE_ID).then(res => {
              this.$message({
                type: 'success',
                message: '管理员信息保存成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.errorMsg
              })
            })
          }
        }
      })
    },
    cancel() {
      this.form = {}
      this.text = ''
      this.way = ''
      this.bol = false
      this.bols = true
      this.dialogFormVisible = false
    },
    // 选择行数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 修改密码
    editClick() {
      if (this.multipleSelection.length !== 0) {
        let empIds = ''
        this.multipleSelection.forEach(item => {
          if (empIds === '') {
            empIds = item['EMP_ID']
          } else {
            empIds = empIds + ',' + item['EMP_ID']
          }
        })
        this.dialogVisible = true
        this.editSearch = {
          empIds: empIds,
          newPassword: '',
          checkPass: ''
        }
        this.$nextTick(() => {
          this.$refs.editSearchForm.clearValidate()
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择表格数据'
        })
      }
    },
    // 保存
    editSave() {
      this.$refs['editSearchForm'].validate(valid => {
        debugger
        if (valid) {
          const param = {
            empIds: this.editSearch.empIds,
            newPassword: this.editSearch.newPassword
          }
          editPassword(param)
            .then(() => {
              this.$message({
                type: 'success',
                message: '修改密码成功!'
              })
              this.dialogVisible = false
            }).catch(err => {

            })
        }
      })
    },
    // 取消
    back() {
      this.dialogVisible = false
    },
    // 重置密码
    restClick() {
      if (this.multipleSelection.length !== 0) {
        let empIds = ''
        this.multipleSelection.forEach(item => {
          if (empIds === '') {
            empIds = item['EMP_ID']
          } else {
            empIds = empIds + ',' + item['EMP_ID']
          }
        })
        const param = {
          empIds: empIds,
          newPassword: 'SHANTUI666'
        }
        restPassword(param)
          .then(() => {
            this.$message({
              type: 'success',
              message: '重置密码成功!'
            })
          }).catch(err => {

          })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择表格数据'
        })
      }
    },
    // 在职状态改变事件
    isOnjobChange() {
      if (this.form.IS_ONJOB === 10081002) {
        this.form.DIMISSION_DATE = new Date()
      } else {
        this.form.DIMISSION_DATE = ''
      }
    }
  }
}
</script>

<style scoped>

</style>
